<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { login } from "@/api/user/login";
import { onLoad } from "@dcloudio/uni-app";
import { bindingPhone } from "@/api/user/user";
import { useUserStore } from "@/store/modules/user";
import { validPhone } from "@/utils/validate";

const emits = defineEmits(["success"]);
const userStore = useUserStore();
const userLogin = reactive<userLoginType>({
  userName: "",
  passWord: "",
});
const rules = {
  // 对name字段进行必填验证
  phone: {
    rules: [
      {
        required: true,
        errorMessage: "请输入手机号",
      },
      {
        validateFunction: function (rule, value, data, callback) {
          if (!validPhone(value)) {
            callback("手机号不正确");
          }
          return true;
        },
      },
    ],
  },
  code: {
    rules: [
      {
        required: true,
        errorMessage: "验证码不能为空",
      },
    ],
  },
};

const form = ref<HTMLFormElement>();
const onSubmit = () => {
  const formData = Object.assign({}, userLogin);
  if (!formData.userName || !formData.passWord)
    return uni.showToast({
      title: "请输入账号密码",
      icon: "success",
      mask: true,
    });
  formData.passWord = encrypt(formData.passWord);
  login(formData).then((res) => {
    userStore.setToken(res.data.accessToken);
    userStore.getuserInfo();
    handleSuccess();
  });
};

const handleRegister = () => {
  const formData = Object.assign({}, userLogin);
  if (!formData.userName || !formData.passWord)
    return uni.showToast({
      title: "请输入账号密码",
      icon: "success",
      mask: true, 
    });
  formData.passWord = encrypt(formData.passWord);
  register(formData).then((res) => {});
};

const redirect = ref<string>("/pages/user/user");
onLoad((option) => {
  if (option?.redirect) {
    redirect.value = option.redirect;
  }
});

const handleSuccess = () => {
  console.log("登录完成");
  emits("success");
};
</script>
<template>
  <div class="login-body">
    <div class="dialog-login">
      <div class="dialog-login-top">
        <div class="dialog-login-logo">
          <div class="dialog-login-title">Hello</div>
          <div class="dialog-login-info">欢迎登录</div>
        </div>
      </div>
      <div class="dialog-login-form">
        <div class="login-input-item">
          <input
            type="text"
            class="login-input"
            v-model="userLogin.userName"
            placeholder="请输入账号/手机"
          />
        </div>
        <div class="login-input-item">
          <input
            class="login-input"
            type="password"
            v-model="userLogin.passWord"
            placeholder="请输入密码"
          />
        </div>
        <Xieyi />

        <div class="dialog-login-btn">
          <button
            type="jb-base2"
            data-radius
            class="w100"
            data-shadow
            @click="onSubmit()"
          >
            登录
          </button>
          <div style="margin-top: 20px">
            <button
              type="success                                   "
              data-radius
              class="w100"
              data-shadow
              @click="handleRegister()"
            >
              注册
            </button>
          </div>

          <div style="margin-top: 20px">
            <!--  #ifdef  MP-WEIXIN -->
            <loginbutton @success="handleSuccess" />

            <!-- #endif -->
          </div>
        </div>
      </div> 
      <div class="dialog-login-botton"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-input-item {
  margin-bottom: 30px;
}
.login-input {
  background-color: #fff;
  border-radius: 50px;
  height: 100rpx;
  box-sizing: border-box;
  padding: 0px 15px;
}

.dialog-login {
  padding: 0 0 15px 0;
  &-top {
    padding: 15px 0;
    height: 400rpx;
    padding-top: 150rpx;
    box-sizing: border-box;
  }
  &-logo {
    text-align: center;
    margin-bottom: 10px;
    .img {
      width: 400rpx;
      height: 400rpx;
    }
  }
  &-title {
    text-align: center;
    font-size: 86rpx;
    color: #000;
    font-weight: bold;
  }
  &-info {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
  }
  &-xy {
    padding: 10px 10px 2px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    text-align: center;
    &-text {
      color: $base;
      padding: 0px 2px;
    }
  }
  &-btn {
    //  margin: 10px;
    margin-top: 10px;
  }
  &-btns {
    font-size: 14px;
    margin-bottom: 10px;
  }
  &-form {
    padding: 15px 4vw;
    .uni-input-wrapper {
      padding: 2vw 4px;
    }
    ::v-deep {
      .is-input-border {
        border-radius: 50px;
      }
    }

    .input-placeholder {
      font-size: 3.6vw;
    }
  }
}
.dialog-login-botton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .title {
    margin-bottom: 30rpx;
    font-size: 36rpx;
    color: #666;
  }
}
$h: 76rpx;
.login-btns {
  background-color: #fbc201;
  width: 100%;
  height: $h;
  line-height: $h;
  text-align: center;
  margin: 0 auto;
  border-radius: 100px;
  color: #fff;
}
</style>
